<template>
    <div class="assignBox signInRoot">
        <div id="movehead">
            <div class="movetop">
                <Amap />
            </div>
            <div class="line" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">===</div>
        </div>
        <div class="moveBottom">
            <div class="bgc-white pd-10">
                <van-notice-bar text="通知内容" left-icon="volume">
                    <p class="van-color-text-assist">
                        昨日打卡情况异常，
                        <span class="color-primary" @click="check">点击此处</span>进入补卡
                    </p>
                </van-notice-bar>
                <ul class="assignList">
                    <VuePerfectScrollbar>
                        <li>
                            <div>
                                <span class="fs-18">08:25</span>
                                <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                            </div>
                            <div class="color-grey">
                                <van-icon name="hospital-map" />
                                泰豪动漫学院
                            </div>
                        </li>
                        <li>
                            <div>
                                <span class="fs-18">08:25</span>
                                <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                            </div>
                            <div class="color-grey">
                                <van-icon name="hospital-map" />
                                泰豪动漫学院
                            </div>
                        </li>
                        <li>
                            <div>
                                <span class="fs-18">08:25</span>
                                <van-tag type="info" class="mgl-5">{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</van-tag>
                            </div>
                            <div class="color-grey">
                                <van-icon name="hospital-map" />
                                泰豪动漫学院
                            </div>
                        </li>
                        <li>
                            <div>
                                <span class="fs-18">08:25</span>
                                <van-tag type="info" class="mgl-5">内勤</van-tag>
                            </div>
                            <div class="color-grey">
                                <van-icon name="hospital-map" />
                                泰豪动漫学院
                            </div>
                        </li>
                    </VuePerfectScrollbar>
                </ul>
                <div class="assignTimes">
                    <div>
                        <div class="text" @click="">
                            <p class="fs-20 mgb-5">上班</p>
                            <p v-if="hasNetWork">{{ signInTime}}{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</p>
                            <p v-else>拍照签到</p>
                        </div>
                    </div>
                    <div>
                        <div class="text" @click="signOut">
                            <p class="fs-20 mgb-5">下班</p>
                            <p v-if="hasNetWork">{{ signInTime }}{{ inOrOutFlag == '1' ? '内勤' : '外勤' }}</p>
                            <p v-else>拍照签到</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <van-overlay :show="readmeshowflag" @click="readmeshowflag = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <h3>员工行为信息系统用户服务条款</h3>
                    <div>
                        <VuePerfectScrollbar style="max-height: 350px">
                            欢迎您使用员工行为信息系统！您可以通过多种不同的方式来使用我们的产品和服务，本服务条款适用于您通过任何方式对员工行为信息系统各项服务的访问和使用。访问、下载或使用员工行为信息系统，即表示您同意员工行为信息系统服务条款：一、重要须知
                            1.在您开始使用员工行为信息系统服务软件、网站及其他服务（统称为“员工行为信息管理系统服务”）前，请您务必仔细阅读并充分理解本《员工行为信息管理系统用户服务条款》、您开通或使用某项服务时的附加条款以及公司不时发布或修订的相关条款（统称为“本用户服务条款”）。同时，您还应仔细阅读并充分理解在本用户服务条款中的系列声明，请您务必特别注意及重点阅读与您的权利及义务密切相关的条款。2.一旦您开始使用员工行为信息系统的服务，即代表您已理解并同意本用户服务条款及系列声明，本用户服务条款及公司的系列声明将构成对您（和您代表的其他主体）具有约束力的法律文件，同时还表明您已完全同意并承认员工行为信息系统已经履行了相关的提示和通知义务。您确保您有充分的权力、权限及能力以同意及履行本用户服务条款。如果您代表其他主体同意本用户服务条款，您确保您已获得充分的法律授权以使您代表的其他主体接受本用户服务条款的约束。如果您未获得充分的授权，请确保由其他主体的授权人士同意本用户服务条款。3.公司有权不时对本用户服务条款进行修订，如果本用户服务条款发生变动，公司将在员工行为信息管理系统的相关软件及网站上公布修订后的用户服务条款。您理解并同意，如果您在修订后的用户服务条款公布并生效后继续使用员工行为信息系统的服务，即视为您已经理解并同意修订后的用户服务条款。二、使用员工行为信息系统的服务
                            1.服务介绍 员工行为信息系统的服务是通过泰豪云无感进入工作签到 APP
                            进行上班、下班打卡、工作时间内行动轨迹及查询考勤信息；公司有权自行确定员工行为信息系统服务的形式和具体内容，有权自行变更、中止或终止员工行为信息系统的部分或全部服务，有权发布新版本并要求您使用。请您务必在确保交通安全的前提下使用员工行为信息系统的服务，您在使用需要连接互联网使用的服务时可能会消耗网络流量，由此产生的流量费等费用由您的电信服务提供商收取，具体收费标准请向您的电信服务提供商咨询。员工行为信息系统的服务不会以所有语言在所有国家提供。公司不承诺员工行为信息系统的服务对中华人民共和国（“中国”，为本用户服务条款之目的，不包括中华人民共和国香港特别行政区、澳门特别行政区和台湾地区）以外的任何国家、地区或地点均可使用。员工行为信息系统所涉及到的员工工作时间内的行动定位及行动轨迹仅用于泰豪公司内部管理，不作为工作以外的用途使用，以保护使用者的隐私权利。员工在非工作时间内应自行关闭行动轨迹，因员工个人原因未关闭产生的行动轨迹跟踪由本人负责。2.账号维护
                            请您自行妥善保管您的账号、密码及其他注册资料，并对您的用户账号下发生的一切行为承担责任。如果由于您未能妥善保管账号、密码及其他注册资料而使您自己、泰豪、其他用户或任何第三方造成损害，您自行承担因此产生的全部后果和损失。您所注册账号的所有权归属于泰豪，使用权仅归属于您，除非有其他合法事由，并经过泰豪同意，您不得将账号赠与、转让、售卖、借用或租用给他人。如果发现您的账号存在未获授权的使用，或者其他可能危害您的账号安全的情形时，您应立即修改密码。
                            您理解对您的请求采取行动需要合理时间，公司对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担法律法规明确规定之外的责任。如果您遗失账号或遗忘密码，您应当按照公司提示的途径申请找回账号或修改密码，您应当妥善保管注册资料与密码保护资料。三、用户行为要求
                            1.信息内容要求
                            您理解并同意，您对您通过员工行为信息系统的服务所提交内容的真实性、准确性、完整性、及时性负责，并且该等内容不违反任何法律法规，不侵犯任何第三方权益，不涉及或鼓励侵权行为或其他非法行为。否则，您应自行承担因此产生的责任和后果。2.服务使用要求
                            您理解并同意，员工行为信息系统的服务需要结合相关设备使用，您保证您为所使用设备的合法所有者或使用者，否则您应当立即停止使用员工行为信息系统产品并将设备归还给设备所有人。如果您对您使用的设备进行任何形式的刷机、拆卸、改装等可能影响设备性能的操作，可能会导致员工行为信息系统的部分或全部服务无法使用，您理解并自行承担此风险。您理解并同意，在使用员工行为信息系统服务时，您应遵守所有适用的法律、法规、规章、规范、政策、行政命令及社会公序良俗。您在使用员工行为信息系统服务过程中，不得以任何方式实施，也不得同意、授权或指示任何其他主体从事包括但不限于下列任何行为：(1)反对宪法所确定的基本原则的行为；(2)宣扬或实施危害国家主权、国家安全、国家秘密、国家统一、国家荣誉、国家利益、民族关系、民族团结、社会秩序、社会稳定、公序良俗的行为；(3)宣扬或实施煽动民族仇恨或民族歧视的、破坏民族团结的、破坏国家宗教政策的、宣扬邪教和封建迷信的、散布谣言的、扰乱社会秩序的、破坏社会稳定的、侮辱的、诽谤的、淫秽的、色情的、暴力的、恐怖的、教唆犯罪的行为；(4)宣扬或实施含有虚假、有害、胁迫、侵害他人隐私、骚扰、侵害、中伤、粗俗、猥亵或其它道德上令人反感的内容的行为；(5)宣扬或提供关于非法行为的说明信息；(6)宣扬或实施侵害他人的人身财产、名誉权、肖像权、知识产权、商业秘密权等合法权益的行为；(7)上载、张贴、发表、发布、传送、传播、存储任何广告信息、垃圾信息、病毒或旨在危害计算机软硬件正常运转的代码、文档或其他任何违法信息；(8)制作、发布、传播用于窃取他人的账号、财产及个人信息的网站、软件或服务，或利用员工行为信息系统服务跟踪、追踪、监视、骚扰或伤害他人；(9)收集或存储有关其他用户的个人数据，用于法律法规或本用户服务条款禁止的行为或活动；(10)进行任何可能对互联网或其他通信网络的正常运转造成不利影响的行为；(11)对员工行为信息系统服务进行修改、复制、发布、传输、公开展示、展览、播放、翻制、翻译、发行、出版、授权、从其创建衍生产品、转让、出售、逆向工程、反编译，或试图从员工行为信息系统服务或其任何部分提取源代码或获取原始数据；(12)使用任何漫游器、抓取工具、网站搜索/检索应用程序或其他工具检索或索引员工行为信息系统服务的任一部分，或出于任何未经授权的目的收集关于用户的信息；(13)脱离员工行为信息系统服务单独使用或展示相关内容，为了商业运营目的印刷包含相关内容截图的销售材料，或将相关内容作为核心内容整合到印刷品中；(14)对员工行为信息系统服务或者其运行过程中展示的任何地图数据或其他数据，以及员工行为信息系统服务客户端与服务器端的交互数据进行更改、修改或创作任何衍生作品，包括但不限于使用插件、外挂或非经授权的第三方工具或服务接入员工行为信息管理系统服务；(15)转让根据本用户服务条款授予的任何使用许可，或基于对员工行为信息系统服务的使用权设置担保权益；(16)将员工行为信息系统服务以收费或其他营利方式进行提供，无论是否为直接经济或金钱收益；(17)其他以任何不合法的方式、为任何不合法的目的或以任何与本用户服务条款不一致的方式使用员工行为信息系统服务，或进行其他未经公司明确许可的行为。3.对自己行为负责
                            您理解并同意，您对自己使用员工行为信息系统服务下的一切行为负责。泰豪有权依据合理判断对违反法律法规或本用户服务条款的行为作出处理，有权对违反法律法规、泰豪规章制度及本用户服务条款的任何用户调查并采取适当的法律行动，包括劳动诉讼。公司有权根据违法违规行为的严重程度，将上述违法违规行为的线索和您的个人信息报告司法机关或其他执法机关，并配合司法机关或其他执法机关进行的调查、听证、起诉等。您自行承担由此产生的任何法律责任。再次感谢您对员工行为信息系统的信任和使用！
                        </VuePerfectScrollbar>
                    </div>
                    <div class="btn">
                        <button>不同意</button>
                        <button @click="agreeMent">同意</button>
                    </div>
                </div>
            </div>
        </van-overlay>
        <van-overlay :show="lockIndShowFlag" @click="lockIndShowFlag = false">
            <div class="wrapper" @click.stop>
                <div class="lockInBox">
                    <van-cell-group>
                        <van-field type="textarea" v-model="goOutReason" label="外勤事由" placeholder="必填，4-10个字符" rows="2"
                            autosize required />
                    </van-cell-group>
                    <p v-show="goOutReasonFlag" class="color-red pdl-5">请填写外勤事由</p>
                    <div class="tac mgt-20">
                        <van-button size="middle" @click="lockIndShowFlag = false">取消</van-button>
                        <van-button type="info" size="middle" @click="subbmitReview" class="mgl-10">提交审批</van-button>
                    </div>

                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Amap from '@/components/Amap';
import { signInFirst, queryAutoControlChnMngList, test, loginApp, getLoginInfo } from './api'
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
import { mapState } from 'vuex'
import Worker from 'worker-loader!./worker.js';
import dateUtil from '@/utils/date.js';
import commonUtil from '@/utils/common.js';
export default {
    computed: {
        ...mapState(['inOrOutFlag'])
    },
    components: {
        Amap,
        VuePerfectScrollbar
    },
    data() {
        return {
            readmeshowflag:false,
            lockIndShowFlag:false,
            goOutReason:'',
            goOutReasonFlag:false,
            worker:null,
            signInFlag:false,
            signInTime: dateUtil.formatDate(new Date(),'hh:mm'),
            hasNetWork:false,
        }
    },
    mounted() {
        this.loginIn();
        // this.savePersonInfo();
        // this.workTest()
    },
    activated() {
        // this.isFirstSignIn();
    },
    beforeDestroy() {
        if (this.worker) {
            this.worker.terminate();
        }
    },
    methods: {
        async loginIn(){
            // const loginInUrl = window.location.href
            alert(JSON.stringify(window.location.href))
            const loginInUrl = `http://192.168.31.187:8089/?appid=500938005&ticket=APPURLWITHTICKET6b3a29038a9c7c81b7df846552928235&client_id=500938005&expire_time=17155710223138msgShowStyle=31#/mainsignln"`
            const startIndex = loginInUrl.indexOf('?');
            const lastIndex = loginInUrl.indexOf('#');
            const query = loginInUrl.substring(startIndex+1, lastIndex);
            const ticket = commonUtil.getQueryVariable(query,'ticket');
            await loginApp(ticket).then(({data})=>{
                
            }).catch(err=>{
                console.log(err);
            })
            getLoginInfo().then(({data})=>{
                if (data.code === 0) {
                    localStorage.setItem('loginInfo', JSON.stringify(data.data))
                }
            })
        },
        touchstart(e) {
            this.startY = e.touches[0].clientY;
            this.topHeight = document.getElementById('movehead').clientHeight;
        },
        touchmove(e) {
            this.moveY = e.touches[0].clientY;
            this.disY = this.moveY - this.startY;
            document.getElementById('movehead').style.height = this.disY + this.topHeight + 'px';
        },
        cbDo(msg) {
            // 计时到，你要做的事
            // this.netWorkStatus();
            this.hasNetWork = false
            qing.on('networkAvailable', function (e) { // 请求数据 上传完数据后删除本地存储数据
                alert('网络连接恢复', JSON.stringify(e))
                this.hasNetWork = true
                if (!this.signInFlag) {
                    test().then(res=>{
                        alert(JSON.stringify(res));
                        localStorage.removeItem('signInInfo');
                        this.signInFlag = true;
                    })
                }
            })
            qing.on('networkDisAvailable', function (e) { // 将拍照数据保存在本地
                this.hasNetWork = false;
                this.signInFlag = false;
                this.$toast('当前网络状态不佳，无法定位。可以使用拍照签到')
            })
        },
        workTest(){
            this.worker = new Worker();
            this.worker.postMessage({ type: 'start', interval: 1000 });
            this.worker.onmessage = this.cbDo;
        },
        // 下班
        signOut(){
            if (this.hasNetWork){ // 有网络
                this.lockIndShowFlag = true
            }else{
                this.$router.push('/signInByTakePhone')
            }
        },
        // 保存用户信息
        savePersonInfo(){
            qing.call('getPersonInfo', {
                success: function (res) {
                    if(res.success=='true'){
                        localStorage.setItem('userInfo', JSON.stringify(res.data))
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            });
        },
        // 是否是首次签到
        isFirstSignIn(){
            signInFirst().then(({data})=>{
                if (data.code=='000000' && data.data) {
                    this.readmeshowflag = true
                }else{
                    this.readmeshowflag = false
                }
            })
        },
        agreeMent(){
            this.readmeshowflag = false
        },
        onClickRight() {
            this.$router.push('/setting');
        },
        check() {
            this.$router.push('/main/workAttendanceCardApply');
            this.$store.commit('changeTabBar', 3);
            this.$store.commit('updateTabBarActive',3)
        },
        // 提交审批
        subbmitReview(){
            if (!this.goOutReason.trim()){
                this.goOutReasonFlag = true
                return
            }
            this.goOutReasonFlag = false;
            queryAutoControlChnMngList({}).then((data)=>{
                if(data.code==''){
                    this.$toast('提交审批成功');
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.assignBox {
    .van-notice-bar {
        background-color: #ffffff !important;
        padding: 5px 14px !important;
    }

    .assignList {
        border-top: 1px solid #ccc;
        padding: 10px 5px;
        max-height: 320px !important;
        overflow: auto;

        li {
            &:first-child {
                background-color: #409eff;
                color: #fff;

                div:last-child {
                    color: #fff !important;
                }
            }

            width: 100%;
            padding: 10px 15px;
            border: 1px solid #409eff;
            border-radius: 5px;
            margin-bottom: 10px;

            div:first-child {
                display: flex;
                align-items: center;
                margin-bottom: 6px;
            }
        }
    }

    .assignTimes {
        >div {
            width: 120px;
            height: 120px;
            background-color: #409eff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;

            .text {
                display: flex;
                flex-direction: column;
                text-align: center;
            }
        }

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px;

        position: fixed;
        width: 100%;
        background: #ffff;
        bottom: 47px;
        left: 0;
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
        width: 80%;
        background-color: #fff;
        >div{
            // max-height: 350px;
            // overflow: auto;
            padding: 10px;
            color: #909399;
        }
        .btn{
            text-align: center;
            button{
                
                border: none;
                background: none;
                border-radius: 14px;
                &:first-child {
                    padding: 8px 25px;
                    border: 1px solid #ccc;
                }
            
                &:last-child {
                    color: #fff;
                    padding: 8px 45px;
                    background-color: #409eff;
                    margin-left: 10px
                }
            }
            
        }
        h3{
            height: 30px;
                line-height: 30px;
                font-size: 16px;
                text-align: center;
                font-weight: 700;
                color: #999;
        }
    }
    .lockInBox{
        width: 80%;
        height: 200px;
        background-color: #fff;
        padding: 10px;
    }
    
}

.signInRoot {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    #movehead {
        height: 250px;
        max-height: 600px;
        min-height: 250px;
        width: 100%;
        display: flex;
        flex-direction: column;

        .movetop {
            flex: 1;
            width: 100%;
        }
    }

    .moveBottom {
        flex: 1;
        width: 100%;
    }

    .line {
        width: 100%;
        height: 10px;
        text-align: center;
    }
}


</style>
